var RepairTimeBoard = function () {
  var template = /* html */ `
    <div class="repair-time-board" v-loading.fullscreen.lock="loading">
      <search-btns ref="searchBtns" :pagination="pagination" :has-scroll="hasScrolling" :has-search="true" search-btn-text="查询"
        search-title="请输入查询年份" :popover-width="120">
        <div slot="search">
          <el-date-picker v-model="search.year" type="year" size="small" style="width:100%" @change="searchData"
            :editable="false" :clearable="false">
          </el-date-picker>
        </div>
      </search-btns>
      <div v-if="repairList.length>0" ref="repairContent" class="time-board-content" :key="'year_'+oldSearch.year">
        <template v-for="(repairs,rowIndex) in repairList">
          <div ref="repairRow" :key="'repairRow_'+rowIndex" :style="{height:'calc(50% - 3px)'}">
            <template v-for="(repair,index) in repairs">
              <repair-time-item :repair="repair" :is-show="getHasShow(rowIndex)"></repair-time-item>
            </template>
          </div>
        </template>
      </div>
      <div v-else class="no-data">
        <div style="color:#ffffff;font-size:20px">
          {{moment(oldSearch.year).get('year')}}年没有维修数据
        </div>
      </div>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    watch: {
      "pagination.currentPage": function () {
        var pagination = this.pagination;
        var repairRows = this.$refs['repairRow'];
        var currentIndex = (pagination.currentPage - 1) * pagination.pageSize;
        var $item = $(repairRows[currentIndex]);
        var top = $item.position().top;

        var $content = $(this.$refs['repairContent']);
        var scrollTop = $content.scrollTop();
        scrollTop += top - 5;

        var self = this;
        this.hasScrolling = true;
        $content.animate({
          scrollTop: scrollTop
        }, 1000, function () {
          self.hasScrolling = false;
        });
      }
    },

    data: function () {
      var search = {
        year: moment().startOf('year').valueOf()
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        hasScrolling: false,
        repairList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 2
        },
        moment: moment
      };
    },

    created: function () {
      var self = this;
      this.setRepairList(true, true).then(function () {
        self.boardRunning();
      });
    },

    methods: {
      setRepairList: function (isSearch, hasLoading) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var year = search.year;
        year = moment(year).get('year');

        if (hasLoading) {
          this.loading = true;
        }
        var self = this;
        return ajaxRequest('workOrder/getWorkOrderApplyDataEveryMonth', {
          yearTime: year
        }).then(function (repairList) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          if (repairList === null) {
            repairList = [];
          }
          repairList = repairList.sort(function (obj1, obj2) {
            var value = obj1.monthTime - obj2.monthTime;
            if (value !== 0) {
              return value;
            }

            return obj1.work_name.localeCompare(obj2.work_name);
          });

          var repairGroup = _.groupBy(repairList, 'monthTime');
          var repairs = [];
          for (var month in repairGroup) {
            repairs.push({
              month: month,
              data: repairGroup[month]
            });
          }
          self.toPageRepairList(repairs);

          if (hasLoading) {
            self.loading = false;
          }
          return repairs;
        }).catch(function () {
          if (hasLoading) {
            self.loading = false;
          }
          return [];
        });
      },

      toPageRepairList: function (repairs) {
        if (repairs.length === 0) {
          this.repairList = [];
          this.pagination.totalCount = 0;
          return;
        }

        var repairList = [];
        var totalRow = repairs.length / 3;
        totalRow = _.round(totalRow, 1);
        totalRow = Math.ceil(totalRow / 2) * 2;
        this.pagination.totalCount = totalRow;

        for (var i = 0; i < totalRow; i++) {
          repairList.push([]);
        }

        var lastRowIndex = 0;
        for (var i = 0; i < repairs.length; i++) {
          var repair = repairs[i];
          var rowIndex = Math.floor(i / 3);
          repair = new RepairTimeInfo(repair);
          repairList[rowIndex].push(repair);
          if (i === repairs.length - 1) {
            lastRowIndex = rowIndex;
          }
        }

        var lastRepair = repairList[lastRowIndex];
        if (lastRepair.length > 0) {
          for (var i = lastRepair.length; i < 3; i++) {
            lastRepair.push(null);
          }
        }
        this.repairList = repairList;
      },

      searchData: function () {
        var self = this;
        this.setRepairList(true, true).then(function () {
          self.$refs['searchBtns'].closePopover();
          self.boardRunning();
        });
      },

      getHasShow: function (rowIndex) {
        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var startIndex = (pagination.currentPage - 1) * pageSize;
        return rowIndex >= startIndex && rowIndex < startIndex + pageSize;
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.resetRepairListRunning();
      },

      resetRepairListRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          var year = self.search.year;
          self.timeoutList[0] = null;
          if (moment(year).isSame(moment(), 'year')) {
            self.setRepairList().then(function () {
              self.resetRepairListRunning();
            });
            return;
          }

          self.resetRepairListRunning();
        }, 3600 * 1000);
        this.timeoutList[0] = timeout;
      }
    },

    components: {
      SearchBtns: SearchBtns,
      RepairTimeItem: RepairTimeItem
    },

    template: template
  };
}();
